<template>
    <div class="app-container">
        <div class="formatList">
            <h5>基础信息</h5>
            <!-- :rules="rules" -->
            <el-form ref="form"  :model="form" label-width="150px" :rules="rules">
                <el-row>
                    <el-col :span="24">
                        <!--  prop="shop_name" -->
                        <el-form-item label="商户名称">
                            <span>{{shops_name}}</span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="name" -->
                        <el-form-item label="PLUS会员卡名称">
                            <el-input v-model="form.name" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="template_name" -->
                        <el-form-item label="会员卡模板">
                            <el-input v-model="form.template_name" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="desc" -->
                        <el-form-item label="会员卡描述">
                            <el-input v-model="form.desc" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="origin_price" -->
                        <el-form-item label="会员卡原价">
                            <el-input v-model="form.origin_price" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="sale_price" -->
                        <el-form-item label="会员卡售价">
                            <el-input v-model="form.sale_price" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="service_price" -->
                        <el-form-item label="服务费">
                            <el-input v-model="form.service_price" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="sale_num" -->
                        <el-form-item label="实际销量">
                            <el-input v-model="form.sale_num" :disabled="true" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  @change="handleNum" -->
                        <el-form-item label="虚拟销量" prop="fake_sale_num">
                            <el-input v-model="form.fake_sale_num" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <!--  prop="v_top" -->
                        <el-form-item label="是否置顶">
                            <el-radio-group v-model="form.v_top">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="16">
                        <!--  prop="purchase_note" -->
                        <el-form-item label="购买须知">
                            <Tinymce v-model="form.purchase_note" :readonly="1" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="divBar" />
                <!-- 购买须知 -->
                <h5 class="titleInfo">会员卡内容</h5>
                <!-- 商家卡券 -->
                <div class="df">
                    <span class="col_666" />
                    <h5 class="font_16">商家卡券</h5>
                </div>
                <div class="listDiv">
                    <el-table :data="shopData" style="width: 100">
                        <el-table-column prop="ticket_type" label="优惠券类型" />
                        <el-table-column prop="shop_name" label="适用范围" />
                        <el-table-column prop="name" label="优惠券名称" />
                        <el-table-column prop="service_name" label="优惠券对应" />
                        <el-table-column label="有效期">
                            <template slot-scope="scope">
                                <span
                                    v-if="scope.row.start_time&&scope.row.end_time"
                                >{{ scope.row.start_time+' 至 '+scope.row.end_time }}</span>
                                <span v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="数量">
                            <template slot-scope="scope">
                                <span>{{ scope.row.num=1 }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 平台卡券 -->
                <div class="df mt_20">
                    <span class="col_666" />
                    <h5 class="font_16">平台卡券</h5>
                </div>
                <div class="listDiv">
                    <el-table ref="goodsData" :data="goodsData" style="width: 100%">
                        <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
                        <el-table-column prop="scope" label="适用范围" align="center" />
                        <el-table-column prop="type_name" label="优惠券名称" align="center" />
                        <el-table-column prop="available" label="优惠券对应商品" align="center" />
                        <el-table-column prop="type_money" label="优惠券金额" align="center" />
                        <el-table-column prop="status" label="有效期" align="center">
                            <template slot-scope="scope">
                                <span
                                    v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                                >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                                <span v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" label="数量" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.num=1 }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="df mt_20">
                    <span class="col_666" />
                    <h5 class="font_16">医美卡券</h5>
                </div>
                <div class="listDiv">
                    <el-table ref="beautyData" :data="beautyData" style="width: 100%">
                        <el-table-column prop="ticket_type" label="优惠券类型" align="center" />
                        <el-table-column prop="hospital_name" label="适用范围" align="center" />
                        <el-table-column prop="type_name" label="优惠券名称" align="center" />
                        <el-table-column prop="project_name" label="优惠券对应项目" align="center" />
                        <el-table-column prop="status" label="有效期" align="center">
                            <template slot-scope="scope">
                                <span
                                    v-if="scope.row.start_ticket_time&&scope.row.end_ticket_time"
                                >{{ scope.row.start_ticket_time+' 至 '+scope.row.end_ticket_time }}</span>
                                <span v-else />
                            </template>
                        </el-table-column>
                        <el-table-column prop="num1" label="数量" align="center">
                            <template slot-scope="scope">
                                <span>{{ scope.row.num1=1 }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <el-button type="primary" class="mt_20" @click="submitFn('form')">提交</el-button>
            </el-form>
        </div>
    </div>
</template>
<script>
import { getDetails, shopEdit,getDetail1 } from "@/api/plusMange";
import Tinymce from "@/components/NewTinymce";
export default {
    name: "PlusListShopEdit",
    components: { Tinymce },
    data() {
        // 虚拟销量
        const actualSales = (rule, value, callback) => {
            let reg = /^\d{1,}$/;
            if (!reg.test(value)) {
                return callback(new Error("请输入正确的数字"));
            } else if (
                Number(this.form.sale_num) &&
                Number(this.form.sale_num) > Number(value)
            ) {
                return callback(new Error("虚拟销量须大于实际销量"));
            } else {
                callback();
            }
        };
        return {
            form: {
                name: "",
                template_name: "",
                desc: "",
                origin_price: "",
                sale_price: "",
                service_price: "",
                purchase_note: "",
                goods_ticket_ids: "",
                beauty_ticket_ids: "",
                sale_num: "",
                fake_sale_num: "",
                v_top: ""
            },
            shops_name: "",
            plus_template_id: "",
            shop_ticket_ids: [],
            shopData: [], //商家卡券
            goodsData: [], //平台卡券
            beautyData: [], //医美卡券
            rules: {
                fake_sale_num: [
                    {
                        required: false,
                        validator: actualSales,
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    created() {
        this.detailsList({ id: this.$route.query.id });
    },
    inject: ["reload"],
    methods: {
        // 详情列表
        detailsList(e) {
            getDetail1(e)
                .then(res => {
                    if (res.data.code == 200) {
                        const resData = res.data.data;
                        this.shops_name = resData.shop_name;
                        // this.form = resData;
                        this.shopData = resData.shop_tickets_list;
                        this.goodsData = resData.goods_tickets_list;
                        this.beautyData = resData.beauty_tickets_list;
                        this.form.name = resData.card_info.name;
                        this.form.template_name =
                            resData.template_info.template_name;
                        this.form.desc = resData.card_info.desc;
                        this.form.origin_price = resData.card_info.origin_price;
                        this.form.sale_price = resData.card_info.sale_price;
                        this.form.service_price =
                            resData.card_info.service_price;
                        this.form.purchase_note =
                            resData.card_info.purchase_note;
                        this.form.fake_sale_num =
                            resData.card_info.fake_sale_num;
                        this.form.sale_num = resData.card_info.sale_num;
                        this.form.v_top = resData.card_info.v_top;
                        this.shop_ticket_ids = resData.shop_ticket_ids;
                        this.plus_template_id =
                            resData.card_info.plus_template_id;
                        // this.isType = resData.card_info.type;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err.msg);
                    this.tableLoading = false;
                });
        },
        submitFn(e) {
            this.$refs[e].validate(valid => {
                let datas = {
                    id: this.$route.query.id,
                    fake_sale_num: Number(this.form.fake_sale_num),
                    v_top: this.form.v_top
                };
                if (valid) {
                    shopEdit(datas)
                        .then(res => {
                            if (res.data.code == 200) {
                                this.succStatus("提交成功");
                                this.$router.push("/plusList");
                                this.reload();
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: res.data.msg,
                                    type: "warning"
                                });
                            }
                        })
                        .catch(err => {
                            this.errorStatus(err.msg);
                        });
                } else {
                    this.$message({
                        message: "有必填项没填，不能提交咯",
                        type: "warning"
                    });
                    return false;
                }
            });
        },
        // 弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        },
        // 成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        // 失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        }
    }
};
</script>
<style scoped>
.app-container {
    padding: 0px 20px !important;
}
.formatList {
    padding: 5px 0 20px 0;
}
.font_16 {
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin: 0;
    margin-bottom: 10px;
}
.mt_20 {
    margin-top: 20px;
}
.col_666 {
    display: inline-block;
    width: 7px;
    height: 20px;
    background: #409eff;
    margin-right: 3px;
    border-radius: 4px;
}
.df {
    display: flex;
}
</style>